<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :show-back="true"> </pageHeaderNew>
    </template>
    <a-space
      ><h3>{{ data.msgTitle }}</h3>
      <a-tag
        :color="data.messageObjInfo[0].isRead === 1 ? 'green' : 'orangered'"
        >{{ data.messageObjInfo[0].isRead === 1 ? '已读' : '未读' }}</a-tag
      ></a-space
    >
    <div class="msgContentBox">
      <a-space style="margin-left: 50px" :size="50">
        <div>{{ data.msgContent }}</div>
        <div>
          <a-space :size="10">
            <a-button type="text" @click="openLink">查看详情</a-button>
            <a-popconfirm content="确认删除?" type="error" @ok="del(item)">
              <a-button type="text" status="danger"
                >删除</a-button
              ></a-popconfirm
            ></a-space
          >
        </div>
      </a-space>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { delMsgApiMessag } from '@/apis/notice/index';

// console.log('router', router.currentRoute.name);
const route = useRoute();
const router = useRouter();
const data = JSON.parse(route.query.val);
console.log(data, route);

const title = '信息详情';

const openLink = () => {
  const path = data.link.split('?');
  const query = {};

  // 检查并解析查询字符串
  if (path[1]) {
    path[1].split('&').forEach((param) => {
      const [key, value] = param.split('=');
      query[key] = value;
    });
  }
  // 输出结果
  console.log('Path:', path); // "/objPermission"
  console.log('Query:', query); // { roleId: '1' }
  router.push({ path: path[0], query });
};
const userId = Number(localStorage.getItem('userId'));
const del = async () => {
  try {
    await delMsgApiMessag({ id: data.id, userId });
    router.back();
  } catch (err: unknown) {
    console.log(err);
  }
};
</script>

<style lang="less" scoped>
:deep(.arco-pagination) {
  float: right;
}

.msgContentBox {
  width: 100%;
  height: 50px;
  background-color: #f0f5ff;
  line-height: 50px;

  // padding: 20px;
}
</style>
